<!-- 购物卡结佣管理-购物卡库存-->
<template>
    <div class="shoppingCardStock">
        <el-form :inline="true" :model="searchParams">
            <el-form-item label="购物卡类别：">
                <el-select v-model="searchParams.typeId" placeholder="请选择购物卡类别">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item,index) in shoppingCardTypeList" :key="index" :label="item.typeName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属楼盘：">
                <el-select
                        v-model="searchParams.devId"
                        placeholder="请输入所属楼盘"
                        filterable
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item,index) in allEstateList" :key="index" :label="item.devName" :value="item.devId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作时间：">
                <el-date-picker
                        v-model="searchParams.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="是否出库：">
                <el-select v-model="searchParams.inOutFlag" placeholder="请选择是否出库">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="是" value="2"></el-option>
                    <el-option label="否" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否发放：">
                <el-select v-model="searchParams.giveOutFlag" placeholder="请选择是否发放">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="面额：">
                <el-input v-model="searchParams.cardDenomination" placeholder="请输入购物卡面额"></el-input>
            </el-form-item>
            <el-form-item label="卡号：">
                <el-input v-model="searchParams.cardCode" placeholder="请输入购物卡卡号"></el-input>
            </el-form-item>
            <el-form-item label="操作人：">
                <el-input v-model="searchParams.creatorName" placeholder="请输入操作人姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
                <el-button @click="onClear">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="mt20 mb20">
            <el-button type="primary" @click="handleShoppingCard('new')">购物卡入库</el-button>
            <el-button type="primary" @click="goBulkUpload">批量入库</el-button>
        </div>
        <el-table :data="tableData" border @sort-change="sortChange" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="id" label="id"></el-table-column>
            <el-table-column align="center" prop="typeName" label="购物卡类别"></el-table-column>
            <el-table-column align="center" prop="cardCode" label="卡号"></el-table-column>
            <el-table-column align="center" prop="cardPassword" label="卡密"></el-table-column>
            <el-table-column align="center" prop="validityDateBegin" label="有效期">
                <template slot-scope="scope">{{scope.row | formatValidityDate}}</template>
            </el-table-column>
            <el-table-column align="center" prop="cardDenomination" label="面额">
                <template slot-scope="scope">{{scope.row.cardDenomination | formatMoney}}</template>
            </el-table-column>
            <el-table-column align="center" prop="cardMedia" label="电子卡/实体卡">
                <template slot-scope="scope">{{scope.row.cardMedia === 1? "电子卡": "实体卡"}}</template>
            </el-table-column>
            <el-table-column align="center" prop="devName" label="所属楼盘"></el-table-column>
            <el-table-column align="center" prop="inStoreType" label="入库类型">
                <template slot-scope="scope">{{scope.row.inStoreType === 1? "好生活采购": "转入"}}</template>
            </el-table-column>
            <el-table-column align="center" prop="purchaserName" label="采购方"></el-table-column>
            <el-table-column align="center" prop="inOutFlag" label="是否出库">
                <template slot-scope="scope">{{scope.row.inOutFlag === 1? "否": "是"}}</template>
            </el-table-column>
            <el-table-column align="center" prop="giveOutFlag" label="是否发放">
                <template slot-scope="scope">{{scope.row.giveOutFlag === 1? "是": "否"}}</template>
            </el-table-column>
            <el-table-column align="center" prop="creatorName" label="操作人"></el-table-column>
            <el-table-column align="center" prop="inStoreDate" sortable="custom" label="操作时间"></el-table-column>
            <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                    <a href="javascript:;;" :class="(scope.row.inOutFlag === 1 && scope.row.status === null ) ? 'handleA' : 'handleA handle-disabled'" @click="handleShoppingCard('edit', scope.row)">编辑</a>
                    <a href="javascript:;;" :class="(scope.row.inOutFlag === 1 && scope.row.status === null) ? 'handleA ml10' : 'ml10 handleA handle-disabled'" @click="handleOutShoppingCard(scope.row)">出库</a>
                    <a href="javascript:;;" class="handleA" @click="goRecord(scope.row.id)">出入库记录</a>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>

        <el-dialog :title="dialogFormText.title" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="shoppingCardForm" ref="shoppingCardForm" :rules="shoppingCardFormRules">
                <el-input type="hidden" v-model="shoppingCardForm.id"></el-input>
                <el-form-item label="购物卡类别" prop="typeId" label-width="95px">
                    <el-select v-model="shoppingCardForm.typeId" placeholder="请选择" class="w-320">
                        <el-option v-for="(item,index) in shoppingCardTypeList" :key="index" :label="item.typeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="卡号" prop="cardCode" label-width="95px">
                    <el-input v-model="shoppingCardForm.cardCode" auto-complete="off" placeholder="请输入" class="w-320"></el-input>
                </el-form-item>
                <el-form-item label="卡密" :prop="'cardPassword'+ shoppingCardForm.cardMedia" label-width="95px">
                    <el-input v-model="shoppingCardForm.cardPassword1" auto-complete="off" placeholder="请输入" class="w-320"></el-input>
                </el-form-item>
                <el-form-item label="面额" prop="cardDenomination" label-width="95px">
                    <el-input v-model="shoppingCardForm.cardDenomination" auto-complete="off" placeholder="请输入" class="w-260 mr20"></el-input>
                    元
                </el-form-item>
                <el-form-item label="有效期" prop="time" label-width="95px">
                    <el-date-picker
                            v-model="shoppingCardForm.time"
                            type="daterange"
                            style="width: 320px;"
                            placeholder="请输入"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="所属楼盘" prop="devId" label-width="95px">
                    <el-select v-model="shoppingCardForm.devId" filterable placeholder="请选择" class="w-320">
                        <el-option v-for="(item,index) in allEstateList" :key="index" :label="item.devName" :value="item.devId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入库类型" prop="inStoreType" label-width="95px">
                    <el-select v-model="shoppingCardForm.inStoreType" placeholder="请选择" class="w-320">
                        <el-option label="好生活采购" :value="1"></el-option>
                        <el-option label="转入" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采购方" prop="purchaserName" label-width="95px">
                    <el-input v-model="shoppingCardForm.purchaserName" auto-complete="off" placeholder="请输入" class="w-320"></el-input>
                </el-form-item>
                <el-form-item label="卡类型" prop="cardMedia" label-width="95px">
                    <el-radio v-model="shoppingCardForm.cardMedia" :label="1" @change="changeCardType(1)">电子卡</el-radio>
                    <el-radio v-model="shoppingCardForm.cardMedia" :label="2" @change="changeCardType(2)">实物卡</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveShoppingCardForm">{{dialogFormText.button}}</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="购物卡出库" :visible.sync="outDialogFormVisible" width="500px">
            <el-form :model="outShoppingCardForm" ref="outShoppingCardForm" :rules="outShoppingCardFormRules">
                <el-form-item label="购物卡类别:" label-width="95px">{{outShoppingCardForm.typeName}}</el-form-item>
                <el-form-item label="卡号:" label-width="95px">{{outShoppingCardForm.cardCode}}</el-form-item>
                <el-form-item label="出库原因" prop="outStoreType" label-width="95px">
                    <el-select v-model="outShoppingCardForm.outStoreType" @change="changeOutStoreType(outShoppingCardForm.outStoreType)" placeholder="请选择" class="w-320">
                        <el-option v-for="(item, index) in outStoreTypeList" :key="index" :label="item.outStoreTypeDesc" :value="item.outStoreType"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="outShoppingCardForm.outStoreType === 3" label="转出到:" :prop="'devId' + outShoppingCardForm.outStoreType" label-width="95px">
                    <el-select v-model="outShoppingCardForm.devId3" placeholder="请选择项目" class="w-320">
                        <el-option v-for="(item,index) in allEstateList" :key="index" :label="item.devName" :value="item.devId"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveOutShoppingCardForm">出库</el-button>
                <el-button @click="outDialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'
    import utils from "@/common/utils.js";

    export default {
        name: 'shoppingCardStock',
        title: '购物卡库存',
        data() {
            let numberFormat = (rule, value, callback) => {
                let reg = /^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)$/g;
                if (!reg.test(value)) {
                    callback(new Error('输入格式不正确，请输入数字，保留小数点后两位!'));
                } else {
                    callback();
                }
            };
            return {
                searchParams: {
                    typeId: '',
                    devId: '',
                    time: ["", ""],
                    inOutFlag: "",
                    giveOutFlag: "",
                    cardDenomination: "",
                    cardCode: "",
                    creatorName: "",
                    sortFlag: "",
                },
                allEstateList: [],
                tableData: [],
                shoppingCardTypeList: [],
                tableConfig: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 10
                },
                shoppingCardForm: {
                    id: "",
                    typeId: "",
                    cardCode: "",
                    cardPassword1: "",
                    cardDenomination: "",
                    time: "",
                    devId: "",
                    inStoreType: "",
                    purchaserName: "",
                    cardMedia: ""
                },
                shoppingCardFormRules: {
                    typeId: [
                        {required: true, message: '请选择类别', trigger: 'blur'},
                    ],
                    cardCode: [
                        {required: true, message: '请输入卡号', trigger: 'blur'},
                    ],
                    cardPassword1: [
                        {required: true, message: '请输入卡密', trigger: 'blur'},
                    ],
                    cardDenomination: [
                        {required: true, message: '请输入卡片面额', trigger: 'blur'},
                        {validator: numberFormat, trigger: 'blur'}
                    ],
                    time: [
                        {required: true, message: '请选择有效期', trigger: 'blur'},
                    ],
                    devId: [
                        {required: true, message: '请选择所属楼盘', trigger: 'blur'},
                    ],
                    inStoreType: [
                        {required: true, message: '请选择入库类型', trigger: 'blur'},
                    ],
                    purchaserName: [
                        {required: true, message: '请输入采购方公司名称', trigger: 'blur'},
                    ],
                    cardMedia: [
                        {required: true, message: '请选择是电子卡还是实物卡', trigger: 'blur'},
                    ]
                },
                dialogFormVisible: false,
                dialogFormText: {
                    title: "购物卡入库单",
                    button: '入 库'
                },
                outDialogFormVisible: false,
                outShoppingCardForm: {
                    outStoreType: "",
                    cardCode: "",
                    typeName: ""
                },
                outStoreTypeList: [],
                outShoppingCardFormRules: {
                    outStoreType: [
                        {required: true, message: '请选择类别', trigger: 'blur'},
                    ],
                    devId3: [
                        {required: true, message: '请选择项目', trigger: 'blur'},
                    ]
                }
            }
        },
        created() {
            this.searchParams.devId = this.$route.query.devId || "";
            this.searchParams.giveOutFlag = this.$route.query.giveOutFlag || "";
            this.couponShoppingCardTypeGetAllList()
            this.couponShoppingCardGetOutStoreTypeList()
            this.queryAllEstate();
            this.getTableList()
        },
        activated(){
            this.onSearch()
        },
        mounted() {

        },
        methods: {
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getTableList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getTableList()
            },
            getTableList() {
                this.axios.post(api.couponShoppingCardCardList, {
                    typeId: this.searchParams.typeId,
                    devId: this.searchParams.devId,
                    inOutFlag: this.searchParams.inOutFlag,
                    giveOutFlag: this.searchParams.giveOutFlag,
                    cardDenomination: this.searchParams.cardDenomination,
                    cardCode: this.searchParams.cardCode,
                    creatorName: this.searchParams.creatorName,
                    sortFlag: this.searchParams.sortFlag,
                    pageNum: this.tableConfig.pageNum,
                    pageSize: this.tableConfig.pageSize,
                    beginTime: utils.getTimeString(this.searchParams.time[0]),
                    endTime: utils.getTimeString(this.searchParams.time[1])
                }).then((res) => {
                    this.tableData = res.data.data.list
                    this.tableConfig.totalSize = res.data.data.total;
                })
            },
            onSearch() {
                this.tableConfig.pageNum = 1
                this.getTableList();
            },
            onClear() {
                this.searchParams = {
                    typeId: '',
                    devId: '',
                    time: ["", ""],
                    inOutFlag: "",
                    cardDenomination: "",
                    cardCode: "",
                    creatorName: "",
                    sortFlag: "",
                }
            },
            sortChange(info) {
                if (info.order === 'descending') {
                    this.searchParams.sortFlag = 1
                } else if (info.order === "ascending") {
                    this.searchParams.sortFlag = 2
                } else {
                    this.searchParams.sortFlag = ""
                }
                this.getTableList()
            },
            handleShoppingCard(type, row) {
                if (type === 'new') {
                    this.dialogFormText = {
                        title: "购物卡入库单",
                        button: '入库'
                    };
                    this.shoppingCardForm = {
                        id: "",
                        typeId: "",
                        cardCode: "",
                        cardPassword1: "",
                        cardDenomination: "",
                        time: "",
                        devId: "",
                        inStoreType: "",
                        purchaserName: "",
                        cardMedia: ""
                    };
                    this.dialogFormVisible = true;
                } else {
                    if (row.inOutFlag === 1) {
                        this.dialogFormText = {
                            title: "编辑购物卡",
                            button: '保存'
                        };

                        this.axios.post(api.couponShoppingCardEditUI, {
                            id: row.id
                        }).then((res) => {
                            let data = res.data.data;
                            this.shoppingCardForm = {
                                id: data.id,
                                typeId: data.typeId,
                                cardCode: data.cardCode,
                                cardPassword1: data.cardPassword,
                                cardDenomination: data.cardDenomination,
                                time: [data.validityDateBegin, data.validityDateEnd],
                                validityDateEnd: data.validityDateEnd,
                                devId: data.devId + "",
                                inStoreType: data.inStoreType,
                                purchaserName: data.purchaserName,
                                cardMedia: data.cardMedia
                            };
                            this.dialogFormVisible = true;
                        })
                    }
                }
            },

            handleOutShoppingCard(row) {
                if (row.inOutFlag === 1 && row.status === null) {
                    this.outDialogFormVisible = true;
                    this.outShoppingCardForm = {
                        id: row.id,
                        typeName: row.typeName,
                        cardCode: row.cardCode,
                        outStoreType: "",
                        devId3: ""
                    }
                }
            },
            goBulkUpload() {
                this.$router.push({path: "./shoppingCardStockBulkUpload"})
            },
            saveShoppingCardForm() {
                this.$refs["shoppingCardForm"].validate((valid) => {
                    if (valid) {
                        let url = api.couponShoppingCardAdd;
                        if (this.shoppingCardForm.id) {
                            url = api.couponShoppingCardEdit
                        }
                        this.axios.post(url, {
                            id: this.shoppingCardForm.id,
                            typeId: this.shoppingCardForm.typeId,
                            cardCode: this.shoppingCardForm.cardCode,
                            cardPassword: this.shoppingCardForm.cardPassword1,
                            cardDenomination: this.shoppingCardForm.cardDenomination,
                            validityDateBegin: utils.getTimeString(this.shoppingCardForm.time[0]),
                            validityDateEnd: utils.getTimeString(this.shoppingCardForm.time[1]),
                            devId: this.shoppingCardForm.devId,
                            inStoreType: this.shoppingCardForm.inStoreType,
                            purchaserName: this.shoppingCardForm.purchaserName,
                            cardMedia: this.shoppingCardForm.cardMedia
                        }).then((res) => {
                            if (res.data.code === 200) {
                                this.$message({
                                    message: this.dialogFormText.button + '成功',
                                    type: 'success'
                                });
                                this.dialogFormVisible = false;
                                this.tableConfig.pageNum = 1;
                                this.getTableList()
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            saveOutShoppingCardForm() {
                this.$refs["outShoppingCardForm"].validate((valid) => {
                    console.log(valid, this.outShoppingCardForm);
                    if (valid) {
                        this.axios.post(api.couponShoppingCardCardOutStore, {
                            id: this.outShoppingCardForm.id,
                            cardCode: this.outShoppingCardForm.cardCode,
                            outStoreType: this.outShoppingCardForm.outStoreType,
                            devId: this.outShoppingCardForm.devId3,
                        }).then((res) => {
                            if (res.data.code === 200) {
                                this.$message({
                                    message: '出库成功',
                                    type: 'success'
                                });
                                this.outDialogFormVisible = false;
                                this.tableConfig.pageNum = 1;
                                this.getTableList()
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            changeCardType(type) {
                if (type === 2) {
                    this.$refs["shoppingCardForm"].clearValidate('cardPassword2')
                }
            },
            changeOutStoreType(type) {
                if (type === 3) {
                    this.$refs["outShoppingCardForm"].clearValidate('devId3')
                }
            },
            goRecord(id) {
                this.$router.push({path: "./shoppingCardStockRecord", query: {id: id}})
            },
            couponShoppingCardTypeGetAllList() {
                this.axios.post(api.couponShoppingCardTypeGetAllList, {}).then((res) => {
                    this.shoppingCardTypeList = res.data.data
                })
            },
            queryAllEstate() {
                this.axios.post(api.queryAllEstateShoppingCardUse, {}).then((res) => {
                    this.allEstateList = res.data.data
                })
            },
            couponShoppingCardGetOutStoreTypeList() {
                this.axios.post(api.couponShoppingCardGetOutStoreTypeList, {}).then((res) => {
                    this.outStoreTypeList = res.data.data
                })
            }
        },
        components: {},
        computed: {},
        filters: {
            formatValidityDate(row) {
                if (row.validityDateBegin && row.validityDateEnd) {
                    return row.validityDateBegin.split(" ")[0] + "至" + row.validityDateEnd.split(" ")[0]
                }
                return ""
            },
            formatMoney(money) {
                return utils.formatMoney(money)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
    .shoppingCardStock {
        .handleA {
            text-decoration: none;
        }
        .handle-disabled {
            color: #ccc;
            cursor: not-allowed;
        }
    }

</style>
